<template>
  <div>
    <div class="container">
      <!--上半部分-->
      <div class="top_container">
        <!--左边：用户中心-->
        <vuser_center></vuser_center>
        <!--右边：主内容-->
        <div class="main_container">
          <!--系统公告-->
          <div class="user_notice">
            <span>系统最新公告：</span><span>为了更好地服务于【每日鲜】的会员朋友及读者 发表意见。</span>
          </div>
          <!--用户余额等信息-->
          <div class="user_main_details">
            <ul class="user_main_details_list">
              <li class="li_1">
                <a href="#">
                  <img src="../../static/images/user_img_05.png"/>
                  <h4>余额:￥54.00</h4>
                </a>
              </li>
              <li class="li_2">
                <a href="#">
                  <img src="../../static/images/user_img_04.png"/>
                  <h4>订单:(5)</h4>
                </a>
              </li>
              <li class="li_3">
                <a href="#">
                  <img src="../../static/images/user_img_08.png"/>
                  <h4>3</h4>
                </a>
              </li>
              <li class="li_4">
                <a href="#">
                  <img src="../../static/images/user_img_07.png"/>
                  <h4>钻石会员</h4>
                </a>
              </li>
              <li class="li_5">
                <a href="#">
                  <img src="../../static/images/user_img_06.png"/>
                  <h4>234分</h4>
                </a>
              </li>
            </ul>
          </div>
          <!--购买记录以及浏览历史区域-->
          <div class="buy_record_and_history_area">
            <!--购买记录-->
            <div class="buy_record">
              <div class="buy_record_title">
                <div class="buy_record_title_left">购买记录</div>
                <div class="buy_record_title_right">只记录你最近30天的操作</div>
              </div>
            </div>
            <table class="buy_product_info">
              <thead>
              <tr>
                <th>产品名称</th>
                <th>数量</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  <a href="#">
                    <img src="../../static/products/p_58.jpg" alt=""/>
                  </a>
                  <a href="#">雅诗兰黛（Estee Lauder）弹性紧实柔肤眼霜15ml
                    (又名弹性紧实眼霜)（提拉紧致 保湿补水 淡化细纹）</a>
                </td>
                <td>2</td>
                <td>完成</td>
                <td><a href="#"><button>查看</button></a></td>
              </tr>
              <tr>
                <td>
                  <a href="#"><img src="../../static/products/p_2.jpg" alt=""/></a>
                  <img src="../../static/images/icon-copy.png" alt=""/>
                  <a href="#"><img src="../../static/products/p_3.jpg" alt=""/></a>
                  <img src="../../static/images/icon-copy.png" alt=""/>
                  <a href="#"><img src="../../static/products/p_4.jpg" alt=""/></a>
                </td>
                <td>2</td>
                <td>完成</td>
                <td><a href="#"><button>查看</button></a></td>
              </tr>
              <tr>
                <td>
                  <a href="#"><img src="../../static/products/p_2.jpg" alt=""/></a>
                  <img src="../../static/images/icon-copy.png" alt=""/>
                  <a href="#"><img src="../../static/products/p_24.jpg" alt=""/></a>
                </td>
                <td>2</td>
                <td>完成</td>
                <td><a href="#"><button>查看</button></a></td>
              </tr>
              </tbody>
              <tfoot>
              <tr>
                <td colspan="4">共2条记录</td>
              </tr>
              </tfoot>
            </table>
            <!--浏览历史-->
            <vread_record_area></vread_record_area>
          </div>
        </div>
      </div>
      <!--下半部分-->
      <div class="bottom_container">
        <vcollection_details_area></vcollection_details_area>
      </div>
    </div>
  </div>
</template>

<script>
  import header from '../components/header';
  import footer from '../components/footer';
  import user_center from '../components/user_components/user_center'
  import read_record_area from '../components/user_components/read_record_area'
  import collection_details_area from '../components/user_components/collection_details_area'

  export default{
    data:function(){
      return {}
    },
    components:{
      vheader:header,
      vfooter:footer,
      vuser_center:user_center,
      vread_record_area:read_record_area,
      vcollection_details_area:collection_details_area
    }
  }

</script>

<style>
  div{
    border:1px solid red;
  }

  .container{
    height:900px;
    width:1200px;
    margin:0 auto;
    position:relative;
  }

  .top_container{
    position:relative;
  }

  .top_container:after{
    content:'';
    display:block;
    clear:both;
  }

  .main_container{
    width:980px;
    float:right;
  }

  .user_notice{
    border:1px solid black;
    background-color:rgb(255,251,235);
    border-color:rgb(251,216,0);
    height:40px;
    line-height:40px;
  }

  .user_main_details{
    position:relative;
    height:140px;
  }

  .user_main_details_list li{
    float:left;
    width:176px;
    height:120px;
    margin:10px 5px;
    background-color:red;
    text-align:center;
    line-height:120px;
    position:relative;
  }

  .user_main_details_list .li_1{
    background-color:#ffa3a3;
  }
  .user_main_details_list .li_2{
    background-color:#69f;
  }
  .user_main_details_list .li_3{
    background-color:#ffa3a3;
  }
  .user_main_details_list .li_4{
    background-color:#f93;
  }
  .user_main_details_list .li_5{
    background-color:#6ebfda;
  }

  .user_main_details_list h4{
    position:absolute;
    top:30px;
    left:60px;
    color:white;
    font-size:16px;
  }

  .buy_record_and_history_area{
    position:relative;
  }

  .buy_record_and_history_area:after{
    content:'';
    display:block;
    clear:both;
  }

  .buy_record{
    position:relative;
    width:710px;
    height:40px;
    float:left;
  }

  .buy_record_title{
    height:22px;
    border-bottom:1px solid #ddd;
  }

  .buy_record_title_left{
    float:left;
    font-size:18px;
    line-height:40px;
    background:white;
    padding:0 5px;
  }

  .buy_record_title_right{
    float:right;
    font-size:12px;
    line-height:40px;
    background:white;
    padding:0 5px;
  }

  .buy_product_info{
    width:710px;
    margin-top:15px;
    float:left;
  }

  .buy_product_info thead{
     height:40px;
     background:#eaeaea;
     line-height:40px;
     font-size:14px;
   }

  .buy_product_info th{
     text-align:center;
    }


  .buy_product_info td{
    position:relative;
    border-bottom:1px dashed gray;
    padding:10px;
    text-align:center;
    line-height:20px;
  }

  .buy_product_info thead :first-child{
      width:470px;
  }

  .buy_product_info img{
    float:left;
  }

  .buy_product_info a>img{
    border:1px solid gray;
  }


  .buy_product_info a img{
    width:80px;
    height:80px;
  }

  .buy_product_info button{
    width:54px;
    height:34px;
    cursor:pointer;
    font-size:14px;
    color:#fff;
    background-color:#f63;
    border-radius:5px;
    border:0;
  }

  .buy_product_info tfoot td{
    text-align:right;
    font-size:14px;
  }
</style>




